
<template>
  <div class="activity-management">
    <h2>活动信息</h2>

    <table>
      <thead>
      <tr>
        <th>活动名称</th>
        <th>活动类型</th>
        <th>活动城市</th>
        <th>活动是否结束</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(activity, index) in filteredActivities" :key="activity.id" :class="{'ended': isActivityEnded(activity)}">
        <td>{{ activity.activityname }}</td>
        <td>{{ activity.activitytype }}</td>
        <td>{{ activity.city }}</td>
        <td>{{ isActivityEnded(activity) ? '是' : '否' }}</td>
        <td>
          <button @click="viewDetails(activity)">详情</button>
          <button @click="editActivity(activity)">编辑</button>
          <button @click="deleteActivity(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 详情模态框 -->
    <div v-if="showDetailsModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeDetailsModal">&times;</span>
        <h3>活动详情</h3>
        <p><strong>活动名称:</strong> {{ selectedActivity.activityname }}</p>
        <p><strong>活动类型:</strong> {{ selectedActivity.activitytype }}</p>
        <p><strong>活动详情:</strong> {{ selectedActivity.details }}</p>
        <p><strong>活动城市:</strong> {{ selectedActivity.city }}</p>
        <p><strong>活动地点:</strong> {{ selectedActivity.location }}</p>
        <p><strong>活动日期:</strong> {{ selectedActivity.activitydate }}</p>
        <p><strong>活动所需人数:</strong> {{ selectedActivity.requiredpeople }}</p>
        <p><strong>已报名人数:</strong> {{ selectedActivity.signeduppeople }}</p>
        <p><strong>活动是否结束:</strong> {{ isActivityEnded(selectedActivity) ? '是' : '否' }}</p>
      </div>
    </div>
    <!-- 编辑模态框 -->
    <div v-if="showEditModal" class="modal">
      <div class="modal-content">
        <h3>编辑活动</h3>
        <label for="activityname">活动名称:</label>
        <input v-model="editActivityData.activityname" id="activityname" type="text" />
        <label for="activitytype">活动类型:</label>
        <select v-model="editActivityData.activitytype" id="activitytype">
          <option value="宠物领养">宠物领养</option>
          <option value="宠物照顾">宠物照顾</option>
          <option value="志愿者活动">志愿者活动</option>
        </select>
        <label for="details">活动详情:</label>
        <textarea v-model="editActivityData.details" id="details"></textarea>
        <label for="city">活动城市:</label>
        <select v-model="editActivityData.city" id="city">
          <option value="北京">北京</option><option value="天津">天津</option><option value="上海">上海</option><option value="重庆">重庆</option>
          <option value="江苏">江苏</option><option value="浙江">浙江</option><option value="江西">江西</option><option value="黑龙江">黑龙江</option><option value="新疆">新疆</option>
          <option value="香港">香港</option><option value="澳门">澳门</option><option value="广东">广东</option><option value="广西">广西</option>
          <option value="湖南">湖南</option><option value="湖北">湖北</option><option value="辽宁">辽宁</option><option value="宁夏">宁夏</option>
          <option value="河南">河南</option><option value="河北">河北</option><option value="山东">山东</option><option value="山西">山西</option>
          <option value="内蒙古">内蒙古</option><option value="吉林">河北</option><option value="安徽">安徽</option>
          <option value="青海">青海</option><option value="甘肃">甘肃</option><option value="陕西">陕西</option>
          <option value="福建">福建</option><option value="海南">海南</option><option value="台湾">台湾</option><option value="海外">海外</option>
        </select>
        <label for="location">活动地点:</label>
        <input v-model="editActivityData.location" id="location" type="text" />
        <label for="activitydate">活动日期:</label>
        <input v-model="editActivityData.activitydate" id="activitydate" type="date" />
        <label for="requiredPeople">活动所需人数:</label>
        <input v-model="editActivityData.requiredpeople" id="requiredPeople" type="number" />
        <div class="buttons">
          <button @click="saveEdit( editActivityData)">保存</button>
          <button @click="closeEditModal">取消</button>
        </div>
      </div>
    </div>
    <!-- 新增活动模态框 -->

    <!-- 添加按钮 -->
    <div class="add-admin">
      <button class="add-button" @click="openAddModal">+</button>
    </div>
    <div v-if="deletedActivityMessage" class="message">{{ deletedActivityMessage }}</div>
    <div v-if="filteredActivities.length === 0">
      <p>目前没有符合条件的活动信息。</p>
    </div>
  </div>
</template>

<script>
import { findAllActivity, updateActivity, deleteActivity } from '../../api/admins.js'
export default {
  data() {
    return {
      activities: [],
      searchText: '',
      showDetailsModal: false,
      showEditModal: false,
      showAddModal: false,
      selectedActivity: {},
      editActivityData: {},
      newActivityData: {
        activityname: '',
        activitytype: '宠物领养',
        details: '',
        city: '北京',
        location: '',
        activitydate: '',
        requiredPeople: 0,
        signedUpPeople: 0
      },
      deletedActivityMessage: ''
    };
  },
  computed: {
    filteredActivities() {
      return this.activities.filter(activity => activity.activityname.includes(this.searchText));
    }
  },
  methods: {
    async fetchActivities() {
      try {
        const response = await findAllActivity();
        this.activities = response.data;
      } catch (error) {
        console.error('Error fetching activities:', error);
      }
    },
    searchActivities() {
    },
    isActivityEnded(activity) {
      const currentDate = new Date();
      const activityDate = new Date(activity.activitydate);
      return activityDate < currentDate;
    },
    async deleteActivity(index) {
      if (confirm('确定要删除这个活动吗？')) {
        const activity = this.activities[index];
        try {
          const response = await deleteActivity(activity.id);
          if (response.data) {
            this.activities.splice(index, 1);
            this.deletedActivityMessage = `活动已删除！`;
            setTimeout(() => {
              this.deletedActivityMessage = '';
            }, 2000);
          }
        } catch (error) {
          console.error('Error deleting activity:', error);
        }
      }
    },
    viewDetails(activity) {
      this.selectedActivity = activity;
      this.showDetailsModal = true;
    },
    closeDetailsModal() {
      this.showDetailsModal = false;
    },
    editActivity(activity) {

      this.editActivityData = { ...activity };
      this.editActivityData.activitydate = this.formatDate(activity.activitydate);
      this.showEditModal = true;
    },
    async saveEdit(aaaa) {
      console.log(aaaa);
      try {
        // 将日期转换为 Date 对象
        this.editActivityData.activitydate = new Date(this.editActivityData.activitydate);

        // 调用 API 更新活动
        const response = await updateActivity(aaaa);

        if (response.data) {
          // 更新前端活动列表
          const index = this.activities.findIndex(activity => activity.id === this.editActivityData.id);
          if (index !== -1) {
            this.activities[index] = { ...this.editActivityData };
          }

          // 关闭编辑模态框
          this.closeEditModal();

          // 提示用户更新成功
          this.deletedActivityMessage = '活动更新成功！';
          setTimeout(() => {
            this.deletedActivityMessage = '';
          }, 2000);
        }
      } catch (error) {
        console.error('Error updating activity:', error);
        // 提示用户更新失败
        this.deletedActivityMessage = '活动更新失败，请重试！';
        setTimeout(() => {
          this.deletedActivityMessage = '';
        }, 2000);
      }
    },
    closeEditModal() {
      this.showEditModal = false;
    },
    openAddModal() {
      this.showAddModal = true;
    },
    closeAddModal() {
      this.showAddModal = false;
    },
    saveNewActivity( aaa) {
      const newActivity = { ...this.newActivityData, id: Date.now() };
      this.activities.push(newActivity);
      this.closeAddModal();
    },
    formatDate(date) {
      const d = new Date(date);
      let month = '' + (d.getMonth() + 1);
      let day = '' + d.getDate();
      const year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
    }
  },
  mounted() {
    this.fetchActivities();
  }
};
</script>

<style scoped>
.activity-management {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  font-family: 'Arial', sans-serif;
  background-color: #f7f7f7;
}
h2 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}
.search-box {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.search-box input {
  padding: 10px;
  width: 300px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}
.search-box input:focus {
  border-color: #5b9bd5;
  outline: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
tr:hover {
    background-color: #fafafa;
  }
th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: #f4f4f4;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}
th:hover {
    background-color: #e2e2e2;
  }
th span {
  position: absolute;
  right: 10px;
  font-size: 14px;
}
button {
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}
button:hover {
  background-color: #45a049;
}
button:disabled {
  background-color: #dcdcdc;
  cursor: not-allowed;
}
button:last-child {
  margin-right: 0; 
}
.ended {
  background-color: #f8d7da; 
  color: red;
}
.ended:hover{
  background-color: #e4c4c7;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
.modal-content h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}
.modal-content label {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  display: block;
}
.modal-content p {
    margin: 8px 0;
    text-align: left;
}

.buttons {
  margin-top: 20px;
}
.buttons button {
  margin-right: 10px;
}
.add-admin {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.add-button {
  background-color: #007bff; 
  color: white;
  border: none;
  border-radius: 50%; 
  width: 50px; 
  height: 50px; 
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.add-button:hover {
  background-color: #0056b3;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #333;
}
.message {
  color: green;
  font-size: 1rem;
  text-align: center;
  margin-top: 20px;
}
</style>